<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<form id="form1">
	<table width="860px" height="300px" border="0" align="center" cellpadding="3" cellspacing="1" bgcolor="#AEDEF4" style="margin:13px">
		<tr>
			<td align="center" valign="top" bgcolor="#E2F7FE">
				<table width="90%" border="0" cellspacing="1" cellpadding="3" style="margin:20px">
					<tr style="height: 30px">
						<td align="center"><input type="button" value="增加监督对象" onclick="vm.addCP()"/></td>
						<td  align="right"><strong>姓名：</strong></td>
						<td  align="left" >
							<input id="cid" data-options="prompt:'请选择矫正人员'" style="width: 220px; height: 25px;" />
						</td>
						<td  align="right"><strong>证件号码：</strong></td>
						<td  align="left" >
							<input id="ccard" data-options="prompt:'请选择证件号码'" style="width: 220px; height: 25px;" />
						</td>
					</tr>
				</table>
				<table width="90%" border="1" cellspacing="1" cellpadding="3" id="table2">
					<caption><h2>监督对象列表</h2></caption>
					<tr  align="center" style="height: 20px">
						<td><strong>序号</strong></td>
						<td><strong>姓名</strong></td>
						<td><strong>性别</strong></td>
						<td><strong>出生日期</strong></td>
						<td><strong>民族</strong></td>
						<td><strong>监管等级</strong></td>
						<td><strong>居住地址</strong></td>
						<td><strong>操作</strong></td>
					</tr>
					<tr align="center" style="height: 20px" v-for="(item,index) in cList" >
						<td v-text="index+1"></td>
						<td v-text="item.name"></td>
						<td v-text="item.sex"></td>
						<td v-text="item.birthday"></td>
						<td v-text="item.nation"></td>
						<td v-text="item.rank"></td>
						<td v-text="item.address"></td>
						<td ><input type="button" @click="vm.delCP(item.id)" value="删除" style="width:50px"/></td>
					</tr>
					<tr align="center" v-if="cList.length==0">
						<td colspan="8">无 </td>
					</tr>
				</table>
			</td>
		</tr>
	</table>
</form>
<script>
	var cid=null;
	$('#cid').combobox({    
	    url:'getCP?id='+psonId,    
	    valueField:'id',    
	    textField:'name',
	    panelHeight:'150px',
	    loadFilter:function(res){
	    	$('#ccard').combobox('loadData',res);
	    	var value=res.data;
	    	return value;
	    },
	    onSelect:function(res){
	    	cid=res.id;
	    	url='getCP?id='+psonId+"&name="+res.name;
	    	$('#ccard').combobox('reload',url);
	    	$('#ccard').combobox('setValue','');
	    }
	});
	$('#ccard').combobox({    
		valueField:'id',    
	    textField:'papersnum',
	    panelHeight:'150px',
	    loadFilter:function(res){
	    	var value=res.data;
	    	return value;
	    },
	    onSelect:function(res){
	    	cid=res.id;
	    }
	});
	var vm=new Vue({
		el:'#table2',
		data:{
			cList:[]
		},
		mounted : function() {
			this.$nextTick(function() {
				this.getCList();
			});
		},
		methods : {
			getCList:function(){
				$.ajax({
					url:'getPcp?id='+psonId,
					success:function(res){
						vm.cList=res.data;
					}
				});
			},
			addCP:function(){
				if(cid!=null){
					var b=false;
					//遍历矫正人员是否已存在
					for(i in vm.cList)
						if(cid==vm.cList[i].id)
							b=true;
					if(!b){
						$.ajax({
							url:'getPcp?cid='+cid,
							success:function(res){
								vm.cList.push(res.data[0]);
							}
						});	
					}
				}
			},
			delCP:function(id){
				for(i in vm.cList){
					if(vm.cList[i].id==id){
						vm.cList.splice(i,1);
						break;
					}
				}
			}
		}
	})
</script>
</body>
</html>